<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/sweetalert.css">
<link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css">
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrapValidator.min.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<title>个人信息</title>
<style>
    .btn-default {
        height: 34px
    }

    .form-control {
        height: 30px
    }
</style>
<div class="container" style="width:90%; height: auto">
    <h1>个人信息</h1>
    <hr>
    <div class="tab-content no-border padding-24">
        <div class="tab-pane in active">
            <div class="row">
                <div class="col-xs-12 col-sm-2 center" style="width: 200px">
                    <a href="#" class="thumbnail" style="width: 180px;height: 200px">
                        <img src="../assets/images/avatars/profile-pic.jpg" alt="Alex's Avatar" id="sculpture">
                    </a>
                    <div class="space space-4" style="width: 180px;height: 200px;text-align: center"><input
                            style="border: none;text-align: center;" type="text" id="employeeName" readonly></div>
                </div>

                <div class="col-xs-12 col-sm-6">
                    <form class="form-horizontal" id="userForm" role="form" style="width:auto">
                        <div class="form-group" style="display: none">
                            <div class="col-sm-6">
                                <input class="form-control" type="text" id="id" name="id">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input class="form-control" type="text" id="code" name="code" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input class="form-control" type="text" id="name" name="name" placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <select class="form-control" id="sex" name="sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input class="form-control" type="text" id="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input class="form-control" type="email" id="email" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6" style="text-align: center">
                                <button class="btn btn-primary btn-sm btn-block" onclick="saveEmployee()">
                                    修改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
      /*  var breadcrumbs = parent.document.getElementById("breadcrumbs");
        breadcrumbs.innerHTML='<ul class="breadcrumb"><li><i class="ace-icon fa fa-home home-icon"></i><a href="/home/index">Home</a></li><li class="active">个人信息</li></ul>';*/
        loadUserInfo();
        formValidator();
    });
    function saveEmployee() {
        //开启验证
        $('#userForm').data('bootstrapValidator').validate();
        if (!$('#userForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/employee/updateUser",
            type: 'POST',
            data: $("#userForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    swal({
                        title: "Tip",
                        text: "修改成功，2s后返回主页面",
                        timer: 2000,
                        showConfirmButton: true
                    },function () {
                        parent.location.reload();
                    });
                    /*swal("Good job!", "修改成功", "success");
                    parent.location.reload();*/
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "修改失败", "error");
            }
        });
    }
    function loadUserInfo() {
        $.ajax({
            url: "/employee/getUserInfo",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    var employee = result.user;
                    $("#id").val(employee.id);
                    $("#employeeName").val(employee.name);
                    $("#name").val(employee.name);
                    $("#password").val(employee.password);
                    $("#sex").val(employee.sex);
                    $("#email").val(employee.email);
                    $("#code").val(employee.code);
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
    }
    function formValidator() {
        $('#userForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 4,
                            message: '用户名长度必须在2到4位之间'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
    }
</script>